<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Throttle Scroll Demo</title>
    <style>
        body {
            height: 2000px; /* 用于使页面有足够的高度进行滚动 */
        }
    </style>
</head>
<body>
<div style="position: fixed; top: 10px; left: 10px;">
    Scroll down the page to see the throttle effect!
</div>

<script src="https://cdn.jsdelivr.net/npm/lodash@4.17.21/lodash.min.js"></script>
<script>
  // 当页面加载完成后执行
  document.addEventListener("DOMContentLoaded", function() {
    // 定义一个函数来处理滚动事件
    function handleScroll() {
      console.log('Scrolling...');
    }

    // 使用 throttle 创建一个节流函数
    const throttledScroll = _.throttle(handleScroll, 1000); // 1秒钟执行一次

    // 将节流函数绑定到 window 对象的滚动事件上
    window.addEventListener('scroll', throttledScroll);
  });
</script>
</body>
</html>
